<!-- 
	주문내역, 결제정보 화면
	작성일 : 10월 13일 
	작성자 : 이민선
-->
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
	#head {height:242px}
	#content {position: relative; height:100%; margin:242px 0 100px 0;}
	#footer {height:100px;}
	
	/*
		주문 이미지
	*/
	#content {width:1100px; margin:0 auto; padding-bottom: 20px;}
	#top_line {width:100%; margin:0 auto; height:1px; border-bottom:1px solid #bfbfbf;}	
	#box {width: 1100px; margin:0 auto; } 
	
	/*
		주문내역 테이블
	*/
	#order {width: 1100px; margin:0 auto; }
	.order_title {padding-top: 20px;}
	.order_table {width: 100%; border-top: 2px solid #7e7e7e;}
	.order_table th {padding:13px 0 8px; font-weight:normal; font-size:12px; text-align:center; color:#414141; border-bottom:1px solid #e9e9e9;}
	.order_table td {padding:10px 0; font-weight:normal; font-size:12px; color:#333; border-bottom:1px solid #e9e9e9;}
	.order_table td.left {font-weight:bold; text-align:left;}
	.order_tbody {border-top: 1px solid #bfbfbf;}
	.thead {background-color:#fffbe7;}
	.total .total_left {position:relative; float:left; width:789px; padding:30px 0px 30px 0px; background-color: #c7c6c1; height: 105px;}
	.total .balance_info a {color:#fff; text-decoration:underline;}
	.total .total_right {overflow:hidden; float:right; width:27.5%; margin:0px 8px 0px 0px; text-align:left; background-color: #c7c6c1;}
	.total .total_right th {font-weight:normal; font-size:12px; text-align:right; background-color: #c7c6c1;}
	.total .total_right td {padding-right:33px; text-align:right; color:#414141; line-height:30px;}
	.total .total_right .price th {padding-top:15px; border-top:1px solid #d9d9d9; font-weight:bold; font-size:16px;}
	.total .total_right .price td {padding-top:14px; border-top:1px solid #d9d9d9; font-weight:bold; font-size:16px; color:#fc6800;}
 	.order_title {padding:40px 0 18px; line-height:0;} 
	/*
		주문자정보 테이블, 배송지정보 테이블, 결제정보 테이블
	*/
	.order_title2 {padding-top: 20px;}
	.table_style2 {width:100%; border-top:2px solid #7e7e7e; border-bottom:2px solid #ebebeb;}
	.table_style2 th {width:200px;  padding:8px 0 8px 30px; font-weight:bold; font-size:12px; text-align:left; background:#f9f9f9; border-bottom:1px solid #e9e9e9;}
	.table_style2 td {padding:8px 0 8px 20px; border-bottom:1px solid #e9e9e9;}
</style>
<title>장돌뱅이 ~대한민국 전통시장을 응원합니다~</title>
<link href="/Jangdolbaeng2/css/customer/common1.css" rel="stylesheet">
<link href="/Jangdolbaeng2/css/bootstrap.min.css" rel="stylesheet">
<link href="/Jangdolbaeng2/css/customer/common.css" rel="stylesheet">
<script src="/Jangdolbaeng2/js/jquery-1.11.1.js"></script>
<script src="/Jangdolbaeng2/js/bootstrap.min.js"></script>
<script type="text/javascript">

//총 합계
$(document).ready(function(){
	//alert("asda");
	var sum = 0;
	for(i = 0; i < '${realCart.size()}'; i++){
		sum =  sum + parseInt($('#' + i).attr('value'));
	}
	$("#total").html(sum + "원");
	$("#total2").html(sum + "원");
	charge(sum);
});

//배송료 처리
function charge(sum){
	//alert(sum);
	 var deliveryCharge = 0;
	 
	 if(sum < 30000){
		 deliveryCharge = 2500;
		 $('#charge').html(deliveryCharge + "원");
		 $('#charge2').html(deliveryCharge + "원");
	 } else {
		 deliveryCharge = 0 ;
		 $('#charge').html(deliveryCharge + "원");
		 $('#charge2').html(deliveryCharge + "원");
	 }
	 totalMoney(sum, deliveryCharge);
}

//총 결제 금액
function totalMoney(sum, deliveryCharge){
	//alert(deliveryCharge);
	//alert(sum);
	var result = 0;
	result = sum + parseInt(deliveryCharge);
	//alert(result);
	$('#totalMoney').html(result + '원');
	$('#totalMoney2').html(result + '원');
}

//휴대전화 번호 문자열 자르기
$(document).ready(function(){

	var phone = '${customer.phone}';
	var phone1 = phone.substring(4, 8);
	var phone2 = phone.substring(9, 13);
	
	$('#buyer_cell1').attr('value', phone1);
	$('#buyer_cell2').attr('value', phone2);
});

//주문자와 동일 처리
$(document).ready(function (){
	inputData();
});

function inputData(){
	var recipient = '${customer.name}';
	var phone = '${customer.phone}';
	var address_phone1 = phone.substring(4, 8);
	var address_phone2 = phone.substring(9, 13);
	var address_zip = '${customer.zipcode}';
	var address_addr1 = '${customer.address1}';
	var address_addr2 = '${customer.address2}';
	
	$('.recipient').attr('value', recipient);
	$('#address_phone1').attr('value', address_phone1);
	$('#address_phone2').attr('value', address_phone2);
	$('.address_zip').attr('value', address_zip);
	$('.address_addr1').attr('value', address_addr1);
	$('.address_addr2').attr('value', address_addr2);
}

//주문자와 동일 체크 풀리면
function copyInfo(){
//	alert("클릭??");
	if($('#sameCustomer').is(':checked') == true){
		inputData();
	} else{
		$('.recipient').attr('value', "");
		$('#address_phone1').attr('value', "");
		$('#address_phone2').attr('value', "");
		$('.address_zip').attr('value', "");
		$('.address_addr1').attr('value', "");
		$('.address_addr2').attr('value', "");
	}
}

//radio버튼 (누르면 배송지정보 사라지고 배송료도 바뀜)
function deliveryWay() {

	var deliveryCharge = 0;
	var sum = 0; 
	var result = 0;
	
	if( $('#shipment').is(':checked') == true){
		//익일배송 선택시 다시 배송지정보 보여줌
		$('#order_type').attr('value','s');
		$('#deliveryDiv').attr('style', '');
		//alert(sum + "1");
		
		//없어진 배송료 다시 띄어주고 총 결제금액 계산
		for(i = 0; i < '${realCart.size()}'; i++){
			sum =  sum + parseInt($('#' + i).attr('value'));
		}
		$("#total").html(sum + "원");
		$("#total2").html(sum + "원");
		
		if(sum < 30000){
			//alert(sum + " : 2");
			 deliveryCharge = 2500;
			 $('#charge').html(deliveryCharge + "원");
			 $('#charge2').html(deliveryCharge + "원");
		 } else {
			 deliveryCharge = 0 ;
			 $('#charge').html(deliveryCharge + "원");
			 $('#charge2').html(deliveryCharge + "원");
		 }
		
	} else {
		//직접수령시 배송지정보 사라짐
		//alert("direct");
		$('#order_type').attr('value','d');
		$('#deliveryDiv').attr('style', 'display:none;');
		
		//직접수령시 배송료 0으로 만들어준다.
		for(i = 0; i < '${realCart.size()}'; i++){
			sum =  sum + parseInt($('#' + i).attr('value'));
		}
		$("#total").html(sum + "원");
		$("#total2").html(sum + "원");
		
		deliveryCharge = 0 ;
		$('#charge').html(deliveryCharge + "원");
		$('#charge2').html(deliveryCharge + "원");
	}

	//총 결제 금액
	result = sum + parseInt(deliveryCharge);
	
	$('#totalMoney').html(result + '원');
	$('#totalMoney2').html(result + '원');

}

//저장
function orderStart(){
	//alert('1');
	
	//product_order 저장
 	 $.ajax({
 		url: '/Jangdolbaeng2/customer/insertPro_Order.action',
 		type: 'POST',
 		dataType: 'json',
 		data: $('#orderInfo').serialize(),
 		contentType: "application/x-www-form-urlencoded; charset=utf-8",
 		success: contentOK
	 });	//order_seq생성 떄문에 먼저 실행
}


function contentOK(json){
	//alert('2');
	var phone = $('#buyer_cell').val()+ "-" + $('#buyer_cell1').val()+ "-" + $('#buyer_cell2').val();
	$('#phone').attr('value', phone);
	
	$('#orderNum').attr('value', json.order_seq);
	
	//배송지정보 저장
	$.ajax({
		url: '/Jangdolbaeng2/customer/insertDeli.action',
		type: 'POST',
		dataType: 'json',
		data: $('#orderDeli').serialize(),
		contentType: "application/x-www-form-urlencoded; charset=utf-8",
		success: good
	});
}

function good(json) {
	//alert('3');
	location.href="/Jangdolbaeng2/customer/order_finish.action?order_seq=" + json.order_seq;
}

function goBack() {
	history.go(-2);
}  
</script>
</head>
<body>
<div id="head">
	<%@ include file="main_header.jsp" %>
</div>
<div id="testjson"></div>

<!-- 
	주문 이미지
 -->
<div id="box">
	<div style="padding: 20px 0 10px 20px;">
		<div id="content">
			<table>
				<tr>
					<td style="padding-right: 170px;">
						<span style="font-size: 40pt; font-family: nanumBB;">ORDER</span><span style="font-size: 40pt;">&nbsp;SHEET</span>
					</td>
					<td style="padding-right: 15px;">
						<h1><span class="glyphicon glyphicon-briefcase" style="color: #b7b7b7;"></span></h1>
					</td>
					<td style="padding-right: 20px;">
						<span style="font-family: fantasy; color: #b7b7b7;">STEP<span style="color: #b7b7b7;">&nbsp;01</span></span><br>
						<h4><span style="color: #b7b7b7;">장바구니</span></h4>
					</td>
					<td style="padding-right: 20px;">
						<h1><span class="glyphicon glyphicon-chevron-right" style="color: #b7b7b7;"></span></h1>
					</td>
					<td style="padding-right: 20px;">
						<h1><span class="glyphicon glyphicon-credit-card" style="color: #FF6002;"></span></h1>
					</td>
					<td style="padding-right: 20px;">
						<span style="font-family: fantasy;">STEP<span style="color: #FF6002;">&nbsp;02</span></span><br>
						<h4><span>주문/결제</span></h4>
					</td>
					<td style="padding-right: 20px;">
						<h1><span class="glyphicon glyphicon-chevron-right" style="color: #b7b7b7;"></span></h1>
					</td>
					<td style="padding-right: 20px;">
						<h1><span class="glyphicon glyphicon-gift" style="color: #b7b7b7;"></span></h1>
					</td>
					<td style="padding-right: 20px;">
						<span style="font-family: fantasy; color: #b7b7b7;">STEP<span style="color: #b7b7b7;">&nbsp;03</span></span><br>
						<h4><span style="color: #b7b7b7;">주문완료</span></h4>
					</td>
				</tr>	
			</table>
		</div>
	</div>
	<div id="top_line"></div>
</div>

<div id="order">
	<!-- 
		주문내역 테이블
	-->
	<form name="order_detail" id="detail">
		<p class="order_title">
			<img alt="주문내역" src="../img/customer/order_title1.gif">
		</p>
	<table class="order_table">
		<thead class="thead">
			<tr>
				<th colspan="2">상품명</th>
				<th style="width: 12%">상품가격</th>
				<th style="width: 10%">수량</th>
				<th style="width: 13%">합계</th>
			</tr>
		</thead>
		<s:iterator value="realCart" status="stat">
			<tbody>	
			<input type="hidden" value="<s:property value="product_seq"/>" name="product_seq"/>
			
				<tr>
					<td width="80" align="center">
						<a href="/Jangdolbaeng2/product/goProduct_detail.action?product_seq=<s:property value="product_seq"/>">
							<img src="data:image/jpeg;base64, <s:property value="product_image1" />"  width="50px"/>
						</a>
					</td>
					<td align="left" style="font-weight:bold;">
						<a href="/Jangdolbaeng2/product/goProduct_detail.action?product_seq=<s:property value="product_seq"/>"><s:property value="product_name"/></a>
					</td>
					<td align="center"><s:property value="product_price"/></td>
					<input type="hidden" value="<s:property value="quantity"/>" name="quantity"/>
					<td align="center"><s:property value="quantity"/></td>
					<td align="center">
						<input type="hidden" value="<s:property value="product_price * quantity"/>" id="<s:property value="#stat.index"/>"/>
						<s:property value="product_price * quantity"/>
					</td>
				</tr>
			</tbody>
		</s:iterator>
	</table>
	<div class="total">
		<div class="total_left"></div>
		<div class="balance_info"><a></a></div>
		<table class="total_right" cellspacing="0" cellpadding="0">
			<tr>
				<th>주문수량합계 : </th>
				<td id="total"></td>
			</tr>
			<tr>
				<th>배송료 : </th>
				<td id="charge"></td>
			</tr>
			<tr class="price">
				<th>총 결제금액 : </th>
				<td id="totalMoney"></td>
			</tr>
		</table>
	</div>
	</form>
	
	<!-- 
		주문자정보 테이블 (value에 정보 가지고 오려면 name vo랑 같게 만들어주기) 
	-->
	
	<form id="orderInfo" name="product_order">
	<input type="hidden" name="product_order.customer_id" value="${session.get("customer_id") }">
		<div style="height:20px; margin:14px 0 10px;">
			<p style="float:left;" class="order_title">
				<img src="../img/customer/order_title2.gif" alt="주문자 정보">
			</p>
		</div>
		
		<table class="table_style2">
			<tbody>
				<tr>
					<th>주문하시는 분</th>
					<td>
						<input type="text" name="customer.name" value="<s:property value="customer.name"/>" class="input" id="customer_name">
					</td>
				</tr>
				<tr>
					<th>휴대전화</th>
					<td>
						<select name="buyer_cell_select" id="buyer_cell">
							<option value="02">02</option>
							<option value="010" selected="selected">010</option>
							<option value="011">011</option>
							<option value="016">016</option>
							<option value="017">017</option>
							<option value="018">018</option>
							<option value="019">019</option>
						</select>
						&nbsp;-&nbsp;
						<input type="text" id="buyer_cell1" value="" style="width: 36px;" maxlength="4">
						&nbsp;-&nbsp;
						<input type="text" id="buyer_cell2" value="" style="width: 36px;" maxlength="4">
					</td>
				</tr>
				<tr>
					<th>이메일</th>
					<td>
						<input type="text" value="<s:property value="customer.email"/>" class="input" style="width: 200px;" id="customer_email">
					</td>
				</tr>
				<tr>
					<th>수령방법</th>
					<td>
						<!-- 보류  : 직접수령시 배송료 사라지게-->
						<input type="hidden" value="s" name="product_order.order_type" id="order_type">
						<input type="radio" name="order_type" onclick="deliveryWay()" checked="checked" id="shipment"> 익일배송
						<input type="radio" name="order_type" onclick="deliveryWay()" id="direct">직접수령 <!-- 직접수령시 display: none으로 밑의 배송지 정보 보이지 않게 해주기 -->
					</td>
				</tr>	
			</tbody>
		</table>
	</form>
	
	<!-- 
		배송지정보 테이블  
		※value에 정보 가지고 오려면 name vo랑 같게 만들어주기 
	 -->
	 
	<div id="deliveryDiv" style="">
		<form id="orderDeli" name="delivery">
		<input type="hidden" name="delivery.order_seq" value="" id="orderNum">
			<div style="height:20px; margin:14px 0 10px; padding-bottom: 20px;" class="order_title">
				<p style="float:left;">
					<img src="../img/customer/order_title3.gif" alt="배송지 정보" style="padding-right:165px;">
				</p>
				<p style="float:left;">
					<input type="checkbox" name="copy_info" onclick="copyInfo()" id="sameCustomer" checked="checked"> 주문자와 동일&nbsp;
				</p><!-- 체크박스 클릭하면 위의 주문자 정보와 같아져야 된다. -->
			</div>
			<div style="position:relative; padding-top: 10px;">
				<table class="table_style2">
					<tbody>	
					<tr>
					    <th>받으시는 분</th>
					    <td>
					    	<input type="text" name="delivery.name" value="" class="recipient" id="recipient">
					    </td>
					</tr>
					<tr>
					    <th>전화번호</th>
						<input type="hidden" value="" id="phone" name="delivery.phone"/>
					    <td id="address_phone_normal" style="display: block;">
							<select name="address_phone_select">
								<option value="02">02</option>
								<option value="010" selected="selected">010</option>
								<option value="011">011</option>
								<option value="016">016</option>
								<option value="017">017</option>
								<option value="018">018</option>
								<option value="019">019</option>
							</select>
							&nbsp;-&nbsp;
							<input type="text" name="address_phone" id="address_phone1" value="" class="address_phone" style="width:36px;" maxlength="4">
							&nbsp;-&nbsp;
							<input type="text" name="address_phone" id="address_phone2" value="" class="address_phone" style="width:36px;" maxlength="4">
							<span>&nbsp;* 연락처가 틀릴경우 배송이 지연됩니다.</span>
					    </td>
					</tr>
					<tr id="domestic_delivery">
					    <th>주소</th>
					    <td>
						    <input type="text" name="delivery.zipcode" value="" class="address_zip" style="width:70px;" readonly="readonly" onclick=""> <a href=""> <img src="../img/customer/check_post.gif" alt="우편번호 검색" onclick=""></a><br>
						    <input type="text" name="delivery.address1" value="" class="address_addr1" style="width:50%; margin:7px 0;" readonly="readonly" onclick=""><br>
						    <input type="text" name="delivery.address2" value="" class="address_addr2" style="width:70%;">
					    </td>
					</tr>
					<tr id="normalMsg" style="display: table-row;">
					    <th>배송관련 할 말<br>(100자내외)<br><span style="cursor:pointer;"></span><br></th>
					    <td>
							<textarea style="width: 99%; height: 80px;" name="delivery.delivery_comment" class="input" id="delMsg"></textarea>
							<input type="hidden" name="dlv_memo" value="">
						</td>
					</tr>
					<tr>
					    <th>장돌뱅이에게 할 말<br>(100자내외)<br></th>
					    <td>
							<textarea style="width:99%; height:80px;" placeholder="장돌뱅이에게 전할 말이 있으시면 적어주세요." name="delivery.jdb2_comment" class="input" id="jdb2Msg"></textarea>
						</td>
					</tr>
					</tbody>
				</table>
			</div>
		</form>
	</div>
	
	<!-- 
		결제정보 테이블 
	-->
	<div style="height:20px; margin:14px 0 10px;">
		<p style="float:left;" class="order_title">
			<img src="../img/customer/order_title7.gif" alt="결제정보" style="padding-right:165px;">
		</p>
		<p style="padding-bottom:10px;"><img src="../img/customer/reference.gif"></p>
	</div>
	<div class="pay" style="margin-top: 170px;">
		<table class="table_style2" style="border-top:2px solid #ebebeb;">
			<tbody>
				<tr>
				    <th>결제방식</th>
				    <td>
					    <input type="radio" name="payment" checked="checked" id="realtime"> 실시간계좌이체<br>
					    <input type="radio" name="payment" id="credit"> 신용카드<br>
						<input type="radio" name="payment" id="bankbook"> 무통장입금&nbsp;&nbsp;
						<select name="bank">
							<option value="">::입금은행선택::</option>
							<option value="6">국민은행 123456-78-900000</option>
							<option value="7">농협 123-4567-8900-00</option>
							<option value="8">우리은행 1234-567-890000</option>
							<option value="9">신한은행 123-456-789000</option>
						</select>
						&nbsp;&nbsp;&nbsp;입금자명 : 
						<input type="text" name="bank_name" size="8" maxlength="30">
						<span style="display:inline-block; padding:5px 0 0 0; font-weight:bold; color:#ff6702; font-size:14px;">
							※작성하신 입금자명과 실제 입금자명이 다르면 입금확인이 불가합니다.
						</span>
					</td>
				</tr>
				<tr>
				    <th style="border-top:1px solid #d0d2d1;">상품합계금액</th>
				    <td style="border-top:1px solid #d0d2d1;" id="total2"></td>
				</tr>
				<tr>
				    <th style="border-top:1px solid #d0d2d1;">배송료</th>
				    <td style="border-top:1px solid #d0d2d1;" id="charge2"></td>
				</tr>
	
				<tr>
				    <th style="border-top:1px solid #d0d2d1;">총 결제금액</th>
				    <td class="totalPrice" style="border-top:1px solid #d0d2d1; font-weight:bold; color:#ff6702;" id="totalMoney2">
				</td>
				</tr>
			</tbody>
		</table>
	</div>
	
	<!-- 주문버튼 -->
	<div id="order1" class="btn" style="padding:15px 400px 60px;">
		<a href="javascript:goBack();">
			<img src="../img/customer/btn_cart5.gif" alt="쇼핑계속하기">
		</a>
		<a href="javascript:orderStart();">
  			<img src="../img/customer/btn_cart6.gif" alt="주문하기" id="orderStart">
		</a>
	</div>
</div>

<div id="footer">
	<%@ include file="main_footer.jsp" %>
</div>
</body>
</html>